<template>
  <div :class="model == 1 ? 'sm-select-layout-1' : 'sm-select-layout-2'">
    <label class="sm-select-label" :style="{ width: labelWidth }">{{
      label
    }}</label>
    <arco-select
      v-model="newValue"
      :size="'small'"
      placeholder="请选择"
      :style="{ width: `${width}rem` }"
      @change="changeTab"
      :allow-search="allowSearch"
    >
      <arco-option
        v-for="(option, index) in options"
        :value="option.value"
        :key="index"
        :disabled="option.disabled"
      >
        {{ option.label }}
      </arco-option>
    </arco-select>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
const emit = defineEmits(["changeTab"]);
const props = defineProps({
  label: { type: String, default: "" },
  labelWidth: { type: String, default: "0.6rem" },
  options: { type: Array, default: [] },
  defaultSelect: { type: Number | String, default: undefined },
  width: { type: Number, default: 1.2 },
  model: { type: String, default: "00" },
  value: { type: String, default: "00" },
  allowSearch: { type: Boolean, default: false },
});

const newValue = computed(() => {
  return props.value;
});

const changeTab = (value, item) => {
  emit("changeTab", value);
};
</script>
<style lang="less" scoped>
.sm-select-layout-1 {
  @import url("./select-1001.less");
  display: flex;
  line-height: 0.24rem;

  .sm-select-label {
    color: #ffffff;
    opacity: var(--color-noraml-opacy);
    font-size: 0.12rem;
    margin-right: 0.1rem;
  }
}
.sm-select-layout-2 {
  @import url("./select-1002.less");
  display: flex;
  line-height: 0.24rem;
  .sm-select-label {
    color: #ffffff;
    opacity: var(--color-noraml-opacy);
    font-size: 0.14rem;
    margin-right: 0.1rem;
  }
}
</style>
